<template>
  <div>
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框 -->
    <van-search
      shape="round"
      v-model="key"
      @input="suggest"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <!-- 历史记录区域 -->
    <van-cell-group v-if="key == ''">
      <van-cell title="历史记录" />
      <van-cell
        v-for="(item, index) in historyList"
        :key="index"
        :title="item"
      />
    </van-cell-group>

    <!-- 搜索建议区域 -->
    <van-cell-group v-else>
      <van-cell v-for="(item, index) in colorSugs" :key="index" icon="search">
        <span v-html="item"></span>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: "",
      // 历史记录数组
      historyList: JSON.parse(localStorage.getItem("history")) || [],
      // 存储建议的数组
      suggestList: [],
      // 保存定时器的变量
      timer: null,
    };
  },

  methods: {
    onSearch() {
      if (this.key != "") {

        // 数组里如果没有这个值，就加起来，有了就不加
        if (!this.historyList.includes(this.key)) {
          // 先把搜索的内容存到数组
          this.historyList.unshift(this.key);
        }
        // 存起来，存到本地存储
        localStorage.setItem("history", JSON.stringify(this.historyList));

        this.$router.push({
          name: 'result',
          query: {
            key: this.key
          }
        })
      }
    },

    // 输入变化时触发
    suggest() {
      // 关闭定时器
      clearTimeout(this.timer);
      // 开启新的
      this.timer = setTimeout(async () => {
        // 获得建议
        if (this.key != "") {
          this.suggestList = [];
          let res = await this.$axios({
            url: "/v1_0/suggestion",
            params: {
              q: this.key,
            },
          });

          this.suggestList = res.data.data.options;
        }
      }, 500);
    },
  },

  // 依赖一个数组得到一个的新数组，就可以用计算属性
  computed: {
    colorSugs() {
      // 用来得到一个新的数组
      // 而新的数组里的每一项关键字包含颜色的
      let arr = [];
      // 遍历旧数组
      for (let i = 0; i < this.suggestList.length; i++) {
        // 参数1：要查找的内容
        // 参数2：替换成什么内容
        // 例如： replace('马', '<span style="color:red;">马</span>')
        // 把马替换成   <span style="color:red;">马</span>

        // 默认这么写是只能替换到第一个，而且区分大小写
        //    所以如果我们想替换全部而且不区分大小写，要用正则
        let reg = new RegExp(this.key, "ig");
        let str = this.suggestList[i].replace(
          reg,
          '<span style="color:red;">' + this.key + "</span>"
        );
        arr.push(str);
      }

      return arr;
    },
  },
};
</script>

<style>
</style>